'use strict';
var React = require('react');
class HkfsStaffItem extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            activeContent:props.content,
            activeClass:'normal'
        };
        this.showBackContent=this.showBackContent.bind(this);
        this.showContent=this.showContent.bind(this);
    }

    showBackContent(){
        this.setState({
            activeContent:this.props.backContent,
            activeClass:'change'
        });
    }

    showContent(){
        this.setState({
            activeContent:this.props.content,
            activeClass:'normal'
        });
    }

    render(){
        return <div className="HkfsStaffItemContainer" onMouseOver={this.showBackContent} onMouseOut={this.showContent}>
            <img className="HkfsStaffImg" src={this.props.reImgSrc}/>
            <div className="HkfsStaffName">{this.props.name}</div>
            <div className={"HkfsStaffContent "+ this.state.activeClass} ><div className={this.state.activeClass}>{this.state.activeContent}</div></div>
        </div>
    }
}

module.exports = HkfsStaffItem;